<template>
	<view class="warp">
		<view class="center">
			<view class="item" v-for="(item,index) in message" :key="index" @click="jumpto(item)">
				<view class="red" v-if="!item.is_see"></view>
				<view :class="[!item.is_see?'title':'title1']">{{item.title}}</view>
				<view :class="[!item.is_see?'content':'content1']">{{item.content}}</view>
				<view class="time">{{item.add_time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {get_notice_list} from '../../../api/api.js'
	export default {
		data(){
			return{
				message:[]
			}
		},
		onLoad() {
			this.datainit()
		},
		methods:{
			datainit(){
				get_notice_list().then(res=>{
					this.message = res.data.list
				})
			},
			jumpto(e){
				console.log(e)
				uni.navigateTo({
					url:`/pages/package/announcement/detail?id=${e.id}`
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.warp{
		background-color: #fafafa;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		.center{
			width: 90%;
			.item{
				padding: 10rpx 40rpx;
				margin-top: 30rpx;
				position: relative;
				height: 175rpx;
				background-color: #FFFFFF;
				.title{
					color:#029E8E ;
					font-size: 28rpx;
				}
				.title1{
					color:#666666 ;
					font-size: 28rpx;
				}
				.content{
					color:#666666;
					margin-top: 20rpx;
					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical
				}
				.content1{
					color:#999999;
					margin-top: 20rpx;
					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical
				}
				.red{
					width: 10rpx;
					height: 10rpx;
					background-color: red;
					border-radius: 50%;
					position: absolute;
					left: 20rpx;
					top: 30rpx;
				}
				.time{
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					color: #FEC860;
					font-size: 20rpx;
				}
			}
		}
	
	}
	
</style>